import React, { useState } from 'react';
import { MatSwitch } from '@mat/react-mobile';
import { DemoBlock } from '@mat/layout';

export default () => {
  const [value, setValue] = useState(false);

  return (
    <>
      <DemoBlock title="基础用法">
        <MatSwitch value={true} />
      </DemoBlock>
      <DemoBlock title="映射对应的值">
        <MatSwitch value="0" inActiveValue="0" activeValue="1" />
      </DemoBlock>
      <DemoBlock title="获取改变后的值">
        <MatSwitch onChange={(value) => setValue(value)} />
        <DemoBlock.Description content={`当前值： ${value}`} />
      </DemoBlock>
    </>
  );
};
